{% load static i18n %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
      <!--公共CSS-->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
   <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css'%}" rel="stylesheet">
    <link href="{% static 'css/nprogress.css' %}" rel="stylesheet">
    <link href="{% static 'css/daterangepicker.css' %}" rel="stylesheet">
    <link href="{% static 'css/custom.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/green.css' %}" rel="stylesheet">
    <link href="{% static 'css/sweetalert/sweetalert.css' %}" rel="stylesheet">
    <link href="{% static 'css/mystyle-table.css' %}" rel="stylesheet">
    <!-- <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon"> -->
    <style type="text/css">
        #search {
            position: relative;
            width: 15%;
            z-index: 1;

        }
    </style>
  </head>

  <body>
    <div class="container body">

      <div class="right_col" role="main">

           <div id="search">
             <select id="level1" class="form-control col-md-3 col-lg-4" onchange="changeselect()">
                 <option value="0">--请选择种类--</option>
                 <option value="1">脑出血患者基本情况</option>
                 <option value="2">最近一次脑出血诊治情况</option>
                 <option value="3">脑出血患者发病前生活方式</option>
                 <option value="4">脑出血患者发病前相关因素调查</option>
                 <option value="5">患者是否接受过以下教育</option>
                 <option value="6">Barthel index (BI) 评分量表</option>
                 <option value="7">饮食方面</option>
             </select>
             <select id="level2" onchange="selectpost()" class="form-control col-md-3 col-lg-4">
                <option value="0">--请选择详情--</option>
             </select>
          </div>
          <div class="clearfix"></div>


          <div id="table1" style="width: 100%;height:750px;"></div>
          <label id="inputvalue" style="display: block;" value="test"></label>
         
      </div>
    </div>
    <!--公共JS-->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/custom.min.js' %}"></script>
    <script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
    <script src="{% static 'js/sweetalert/sweetalert.min.js' %}"></script>
    <script src="/static/js/echarts.js"></script>
  <!--单独页面定制js-->
<script>
var myChart1 = echarts.init(document.getElementById('table1'));//echarts图表显示位置

//下拉菜单相关函数
let arr = new Array(5);
arr[0] = ['--请选择详情--'];
arr[1] = ['性别','年龄','发病次数','民族','文化程度','职业',"婚姻情况","家庭人均月收入",'医保类型'];
arr[2] = ['脑出血发病时是否做CT/CTA检查','脑出血发病时是否做磁共振(MRI)检查','患者目前生存状态','是否住院治疗',"是否定起复诊"];
arr[3] = ['体力活动','晚上一般几点睡觉','晚上一般睡眠时长',"吸烟史","烟龄","饮酒史","酒龄","饮酒种类"];
arr[4] = ['血糖范围','血脂范围','脑出血发病以前是否有过脑梗死',"有无高血压病史","心房颤动病史","冠心病病史","夜间睡觉是否打呼噜"];
arr[5] = ['糖尿病健康教育','戒烟教育','限酒教育','控制体重教育','低盐饮食教育','低脂饮食教育'];
arr[6] = ['大便','小便','梳洗','如厕','吃饭','转移','活动','穿衣','上楼梯','洗澡'];
arr[7] = ['口味偏好','食用水产品频率','食用蔬菜的频率','食用水果的频率','食用奶及奶制品的频率','食用辣椒的频率','食用熏制食品的频率','食用腌制食品的频率',"用油种类"];

//获取二级下拉框
let level2 = document.getElementById('level2');

//下拉联动
function remove() {
    let options = level2.getElementsByTagName('option');
    for(let i = 0; i < options.length; i++){
        level2.removeChild(options[i]);
        i--;
    }
}

//一级下拉框事件触发
function changeselect() {
    remove()
    var index = $('#level1 option:selected').val();//获取一级下拉菜单的index值
    for(let i = 0; i < arr[index].length; i++){
        let option = document.createElement('option');
        let text = document.createTextNode(arr[index][i]);
        option.appendChild(text);
        level2.appendChild(option);
    }

    //默认显示二级菜单第一个
    if(index != 0){//防止在获取数据阶段选了选择栏，造成请求数据失败
        document.getElementById("inputvalue").value = arr[index][0];
        ajaxpost();
    }
    
}

//二级下拉框事件触发
function selectpost(){
    var xx = $('#level2 option:selected').val();//获取下拉菜单的值
    if(xx != '--请选择详情--'){
        document.getElementById("inputvalue").value = xx;
        ajaxpost();
    }
}

function ajaxpost(){
    // 显示标题，图例和空的坐标轴
    var postvalue =$("#inputvalue").val();//获取当前标题名称
    var option={
            title: {
                text:postvalue+'统计',//标题文本
                textStyle: {
                    fontSize: 30,//字体大小
                },
                left:'center' //标题距离左侧的距离,可以填实际的距离
            },
            tooltip: {
                trigger: 'axis',//触发类型，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                showContent: true
            },
            legend: {//图例
                top:'10%',
                left:'68%',
                width:'15%',
            },
            toolbox:{//工具栏
                feature:{
                    magicType: {
                        type: ['line', 'bar', 'stack']//动态类型切换
                    },
                    dataZoom:{},//数据区域缩放
                    restore:{},//配置项还原
                },
                dataZoom:{},
                restore:{},
                right:'5%',
                top:'40%'
            },
            xAxis: {
                type: 'category',//类目轴，适合离散数据
                axisLabel:{// 坐标轴刻度标签的相关设置
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:'20'
                }},
            },
            yAxis: {gridIndex:0},
            grid:{top:'50%'},//网络线
            //series: []

    };
    myChart1.on('updateAxisPointer', function (event) {//交互
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart1.setOption({
                        series: {
                        id: 'pie',
                        label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                        }
                    }
                    });
                }
            });
    myChart1.clear();
    myChart1.setOption(option);


    //myChart1.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        type:"POST",
        data: {'typepost':postvalue},
        //datatype:'html'
        url: "{% url 'totalpost' %}", //后台处理函数的url
        cache: false,
        success: function(data){
            data = JSON.parse(data);
            console.log(data)
            var key = Object.keys(data);//提取所有省份名称
            var alldata =[];//为source提供项目的数据
            //遍历每种结果
            for(var i=0;i<=data.zongtongji.length;i++) {
                alldata[i] = [];//二维数组
                if (i == 0) {//第一维度数据
                    alldata[0][0] = 'name';
                    for (var j = 1; j <= key.length; j++) {
                        alldata[0][j] = key[j - 1];
                    }
                } else {
                    alldata[i][0] = data.zongtongji[i-1].name;//从data爬取其他维度数据
                    for(var j=1;j<=key.length;j++){//遍历所有省份
                        var flag=false;
                        for(var k=0;k<data[key[j-1]].length;k++){//遍历当前省份所有项目
                            if(data[key[j-1]][k].name==alldata[i][0]){//当前省份同当前维度相同将数据填入alldata
                                alldata[i][j]=data[key[j-1]][k].value;
                                flag=true;
                            }
                        }
                        if(flag == false){alldata[i][j]=0;}//当前身份缺少的项目用0补足
                    }
                }
            }
            
            for(var i=1;i<alldata[0].length;i++){//替换alldata第一维的拼音
                if(alldata[0][i]=='hunan'){alldata[0][i]='湖南';}
                else if(alldata[0][i]=='hubei'){alldata[0][i]='湖北';}
                else if(alldata[0][i]=='jiangxi'){alldata[0][i]='江西';}
                else if(alldata[0][i]=='henan'){alldata[0][i]='河南';}
                else if(alldata[0][i]=='anhui'){alldata[0][i]='安徽';}
                else if(alldata[0][i]=='zongtongji'){alldata[0][i]='总统计';}
            }
           



            var series=[];//按维度添加series
            for(var i=0;i<alldata.length-1;i++)
            {
                series.push({seriesLayoutBy: 'row',type:'bar'});
            }
            series.push({
                    type:'pie',
                    id:'pie',
                    radius: '30%',
                    center: ['50%', '30%'],
                    label:{textStyle:{
                        fontWeight:'bold',
                    }},
                    encode: {
                    itemName: 'name',
                    value: '总统计',
                    tooltip: '总统计'
                    }
                });


            myChart1.setOption({        //加载数据图表
                dataset:{source:alldata},
                series:series
            });
         },
    error : function(errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart1.hideLoading();
    }

    });

}
</script>
  </body>
</html>